<template>
	<view class="u-wrap">
		<view>
			<image :src="shop.shopLogo" style="width: 100%;height: 400upx;"></image>
			<view class="" style="position: absolute;left: 30upx; top: 320upx;color: #FFFFFF;font-size: 60upx;">
				{{shop.shopName}}
			</view>
		</view>
		<view class="flex justify-start nav bg-white">
			<view class="cu-item " :class="{'nav-cur':curType == '1'}" v-if="openType == '1' || openType == '3'"
				@click="_changeTab('1')">商品</view>
			<view class="cu-item" :class="{'nav-cur':curType == '2'}" v-if="openType == '2' || openType == '3'"
				@click="_changeTab('2')">家政服务</view>
		</view>
		<view class="u-menu-wrap margin-top-xs" v-if="curType == '1'">
			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
				<view v-for="(category,index) in goodsCategorys" :key="category.categoryId" class="u-tab-item"
					:class="[category.categoryName==categoryName ? 'u-tab-item-active' : '']"
					@tap.stop="showCategory(category)">
					<text class="u-line-1">{{category.categoryName}}</text>
				</view>
			</scroll-view>
			<scroll-view scroll-y class="right-box">
				<view class="page-view">
					<view class="class-item">
						<view class="item-title">
							<text>{{categoryName}}</text>
						</view>
						<view class="item-container">
							<view class="thumb-box" v-for="(prod, index) in products" :key="index"
								@tap="toProduct(prod)">
								<image class="item-menu-image c-radius" :src="prod.coverPhoto" mode=""></image>
								<view class="item-menu-name margin-top-sm">{{prod.prodName}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="u-menu-wrap margin-top-xs" v-if="curType == '2'">
			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
				<view v-for="(category,index) in servCategorys" :key="category.hktId" class="u-tab-item"
					:class="[category.hktId==hktId ? 'u-tab-item-active' : '']"
					@tap.stop="showHouseKeepingType(category)">
					<text class="u-line-1">{{category.hktName}}</text>
				</view>
			</scroll-view>
			<scroll-view scroll-y class="right-box">
				<view class="page-view">
					<view class="class-item">
						<view class="item-title">
							<text>{{hktName}}</text>
						</view>
						<view class="item-container">
							<view class="thumb-box" v-for="(serv, index) in servs" :key="index"
								@tap="toServ(serv)">
								<image class="item-menu-image c-radius" :src="serv.coverPhoto" mode=""></image>
								<view class="item-menu-name margin-top-sm">{{serv.hktName}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<shop-tab-bar tabBarShow="1"></shop-tab-bar>
	</view>
</template>
<script>
	import {
		queryProductCategory,
		getProduct
	} from '@/api/goods/goodsApi.js';
	import {
		getHousekeepingTypeList,
		getHousekeepingServList
	} from '@/api/homemaking/homemakingApi.js';
	import {
		getUserId,
		getUserName,
		saveUserVisit
	} from '@/api/user/userApi.js';
	import {
		getShops
	} from '@/api/shop/shopApi.js';

	import {
		getShopId
	} from '@/api/shop/shopApi.js';
	import ShopTabBar from '@/components/TabBar/ShopTabBar.vue';

	export default {
		components: {
			ShopTabBar
		},
		data() {
			return {
				shopId: '',
				scrollTop: 0, //tab标题的滚动条位置
				current: 0, // 预设当前项的值
				//分类列表
				goodsCategorys: [],
				products: [],
				categoryName: '',
				categoryId: '',
				servCategorys: [],
				servs: [],
				hktName: '',
				hktId: '',
				banner: '',
				openType: '', // 1 商品 2 服务 3 商品服务
				curType: '',
				shop: {},
				user_info: {},

			}
		},
		async onLoad(options) {
			await this.vc.onLoad(options).then(_suc => {}, _err => {});
			this.shopId = getShopId();

			//this.getBannerList();
			this.load_shop();
			//this._saveUserVisit();
		},
		methods: {
			//保存访问记录
			_saveUserVisit: function() {
				let _uname = "";
				let _uid = "";
				if (this.vc.hasLogin()) {
					_uname = getUserName();
					_uid = getUserId();
				} else {
					_uname = "匿名用户";
					_uid = "-1";
				}
				let data = {
					shopId: this.shopId,
					visitUserName: _uname,
					visitUserId: _uid
				};
				saveUserVisit(data).then()
			},
			load_shop: function() {
				let that = this;
				getShops({
						page: 1,
						row: 1,
						shopId: this.shopId
					})
					.then(_data => {
						that.shop = _data[0];
						that.openType = _data[0].openType;
						if (that.openType == '1' || that.openType == '3') {
							that._changeTab(1);
						} else {
							that._changeTab(2);
						}
					})
			},
			_changeTab: function(_curType) {
				this.curType = _curType;
				this.goodsCategorys = [];
				this.products = [];
				this.categoryName = '';
				if (this.curType == '1') {
					this.queryGoodsCateList();
					return;
				}
				this.queryServCateList();
			},
			queryServCateList: function() {
				let _that = this;
				getHousekeepingTypeList({
					page: 1,
					row: 100,
					shopId: '9999',
					typeCd: '1001'
				}).then(_data => {
					_that.servCategorys = _data.data;
					if (_that.servCategorys.length > 0) {
						_that.showHouseKeepingType(_that.servCategorys[0]);
					}
				})
			},
			
			showHouseKeepingType:function(_serv){
				this.hktName = _serv.hktName;
				this.hktId = _serv.hktId;
				this._loadServs()
			},
			_loadServs: function() {
				let _that = this;
				let _data = {
					shopId: this.shopId,
					hktId: this.hktId,
					page: 1,
					row: 100
				}
				getHousekeepingServList(_data)
					.then(data => {
						_that.servs = data.data;
					})
			},
			queryGoodsCateList: function() {
				let _that = this;
				let _data = {
					shopId: this.shopId,
					page: 1,
					row: 100
				}
				queryProductCategory(_data)
					.then(data => {
						_that.goodsCategorys = data;
						if (data.length > 0) {
							_that.showCategory(data[0]);
						}
					})

			},
			_loadProducts: function() {
				let _that = this;
				let _data = {
					shopId: this.shopId,
					categoryId: this.categoryId,
					page: 1,
					row: 100
				}
				getProduct(_data)
					.then(data => {
						_that.products = data.data;
					})
			},
			//分类切换显示
			showCategory(_category) {
				this.categoryName = _category.categoryName;
				this.categoryId = _category.categoryId;
				this._loadProducts()
			},
			toProduct: function(e) {
				this.vc.navigateTo({
					url: '/pages/goods/goods?productId=' + e.productId + "&shopId=" + e.shopId
				});
			},
			toServ: function(e) {
				this.vc.navigateTo({
					url: '/pages/homemaking/detail?shopId=' + e.shopId + "&servId=" + e.servId
				});
			},
			//搜索跳转
			tosearch: function(e) {
				uni.navigateTo({
					url: `/pages/goods/HM-search`
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.u-wrap {
		height: calc(100vh);
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
		display: flex;
		flex-direction: column;
	}

	.nav-cur {
		font-weight: bold;
		color: #0483ff;
		border-bottom: 1px solid #0483ff;
	}

	.cu-item {
		height: 80upx;
	}

	.u-search-box {
		padding: 18rpx 30rpx;
	}

	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
	}

	.u-tab-view {
		width: 200rpx;
		height: 100%;
	}

	.u-tab-item {
		height: 110rpx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #444;
		font-weight: 400;
		line-height: 1;
	}

	.u-tab-item-active {
		position: relative;
		color: #000;
		font-size: 30rpx;
		font-weight: 600;
		background: #fff;
	}

	.u-tab-item-active::before {
		content: "";
		position: absolute;
		border-left: 4px solid $u-type-primary;
		height: 32rpx;
		left: 0;
		top: 39rpx;
	}

	.u-tab-view {
		height: 100%;
	}

	.right-box {
		background-color: rgb(250, 250, 250);
	}

	.page-view {
		padding: 16rpx;
		padding-top: 0upx;
	}

	.class-item {
		margin-bottom: 30rpx;
		background-color: #fff;
		padding: 16rpx;
		border-radius: 8rpx;
	}

	.item-title {
		font-size: 26rpx;
		color: $u-main-color;
		font-weight: bold;
	}

	.item-menu-name {
		font-weight: normal;
		font-size: 24rpx;
		color: $u-main-color;
	}

	.item-container {
		display: flex;
		flex-wrap: wrap;
	}

	.thumb-box {
		width: 33.333333%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
	}

	.item-menu-image {
		width: 120rpx;
		height: 120rpx;
	}
</style>